<template>
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
    name: 'Scroll',
    props: {
        probeType: {
            type: Number,
            default: 0
        },
        pullUpLoad: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            bscroll: null
        }
    },
    mounted() {
        this.bscroll = new BScroll(this.$refs.wrapper, {
            click: true,
            probeType: this.probeType,
            pullUpLoad: this.pullUpLoad
        })

        this.bscroll.on('scroll', (position) => {
            this.$emit('scroll', position)
        })

        if(this.pullUpLoad) {
            this.bscroll.on('pullingUp', () => {
                this.$emit('pullingUp')
            })
        }

        // console.log('scroll', this.bscroll)

        // this.bscroll.refresh()
    },
    methods: {
        refresh() {
            console.log('---------')
            this.bscroll && this.bscroll.refresh()
        },
        finishPullUp() {
            this.bscroll && this.bscroll.finishPullUp()
        }
    }
}
</script>
<style scoped>

</style>